<template>
  <div class="login">
    <a-form id="login" :form="form" class="login-form">
      <div class="logo">
        <img :src="logo" alt="" />
      </div>
      <a-form-item :validateStatus="mobileStatus" :help="mobileHelp">
        <a-input placeholder="请输入手机号码" v-model="mobile"> </a-input>
      </a-form-item>
      <a-form-item
        class="captchaItem"
        :validateStatus="captchaCodeStatus"
        :help="captchaCodeHelp"
      >
        <a-input
          class="captchaCode"
          placeholder="请输入图片验证码"
          v-model="captchaCode"
        >
        </a-input>
        <img class="captchaImage" :src="captchaImage" @click="getCaptcha" />
      </a-form-item>
      <a-form-item :validateStatus="smsCodeStatus" :help="smsCodeHelp">
        <a-input-search placeholder="请输入短信验证码" v-model="smsCode">
          <a-button
            slot="enterButton"
            class="smsCodeBtn"
            @click.native="getSmsCode"
          >
            {{ second === totalSecond ? "获取验证码" : `${second}s后重新发送` }}
          </a-button>
        </a-input-search>
      </a-form-item>
      <a-form-item>
        <a-button
          type="primary"
          enter-button="Search"
          class="login-form-button"
          @click.native="login"
        >
          登录
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import logo from "@/assets/images/logo.png";
import { captcha, sendSms, login } from "@/api/login";
import { notification } from "ant-design-vue";
import "ant-design-vue/lib/notification/style/css";
import { mapMutations } from "vuex";

export default {
  data() {
    return {
      logo,
      mobile: "",
      mobileStatus: "",
      mobileHelp: "",
      captchaImage: "",
      captchaCode: "",
      captchaId: "",
      captchaCodeStatus: "",
      captchaCodeHelp: "",
      smsCode: "",
      smsCodeId: "",
      smsCodeStatus: "",
      smsCodeHelp: "",
      second: 60,
      totalSecond: 60,
      timer: null,
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: "login" });
  },
  created() {
    this.getCaptcha();
  },
  methods: {
    getCaptcha() {
      captcha().then((res) => {
        this.captchaImage = "data:image/png;base64," + res.data.captcha;
        this.captchaId = res.data.captchaId;
      });
    },
    async getSmsCode() {
      let flag = false;
      flag = this.validateMobile();
      flag = this.validateCaptchaCode();
      if (flag) {
        return;
      }
      //发送短信验证码
      if (!this.timer && this.second === this.totalSecond) {
        await sendSms({
          mobile: this.mobile,
          captchaCode: this.captchaCode,
          captchaId: this.captchaId,
        }).then((res) => {
          if (res.code === 200) {
            notification.success({
              message: "消息提示",
              description: "已发送短信验证码！",
              duration: 3,
            });
            this.smsCodeId = res.data.smsCodeId;
            //获取验证码按钮倒计时60秒
            this.timer = setInterval(() => {
              if (this.second > 0) {
                this.second--;
              } else {
                clearInterval(this.timer);
                this.second = this.totalSecond;
                this.timer = null;
              }
            }, 1000);
          }
        });
      }
    },
    async login() {
      //校验参数
      let flag = false;
      flag = this.validateMobile();
      flag = this.validateCaptchaCode();
      flag = this.validateSmsCode();
      if (flag) {
        return;
      }
      //登录
      await login({
        mobile: this.mobile,
        smsCode: this.smsCode,
        smsCodeId: this.smsCodeId,
      }).then((res) => {
        if (res.code === 200) {
          notification.success({
              message: "消息提示",
              description: "登录成功！",
              duration: 1,
            });
          //添加token到store
          this.setToken(res.data.token);
          //跳转到首页
          const url = this.$route.query.backUrl || '/welcome';
          this.$router.replace(url);
        } else {
          //登录失败
          notification.error({
            message: "消息提示",
            description: "登录失败",
            duration: 3,
          });
        }
      });
    },
    //添加token
    ...mapMutations('login', ['setToken']),
    validateMobile() {
      let flag = false;
      if (this.mobile === "") {
        this.mobileStatus = "error";
        this.mobileHelp = "请输入手机号码";
        flag = true;
      } else {
        //正则表达式校验mobile
        if (!/^1[3-9]\d{9}$/.test(this.mobile)) {
          this.mobileStatus = "error";
          this.mobileHelp = "请输入格式正确的手机号码";
          flag = true;
        } else {
          this.mobileStatus = "success";
          this.mobileHelp = "";
        }
      }
      return flag;
    },
    validateCaptchaCode() {
      let flag = false;
      if (this.captchaCode === "") {
        this.captchaCodeStatus = "error";
        this.captchaCodeHelp = "请输入图片验证码";
        flag = true;
      } else {
        if (this.captchaCode.length !== 4) {
          this.captchaCodeStatus = "error";
          this.captchaCodeHelp = "请输入正确的图片验证码";
          flag = true;
        } else {
          this.captchaCodeStatus = "success";
          this.captchaCodeHelp = "";
        }
      }
      return flag;
    },
    validateSmsCode() {
      let flag = false;
      if (this.smsCode === "") {
        this.smsCodeStatus = "error";
        this.smsCodeHelp = "请输入短信验证码";
        flag = true;
      } else {
        if (this.smsCode.length !== 6) {
          this.smsCodeStatus = "error";
          this.smsCodeHelp = "请输入正确的短信验证码";
          flag = true;
        } else {
          this.smsCodeStatus = "success";
          this.smsCodeHelp = "";
        }
      }
      return flag;
    },
  },
  destroyed() {
    clearInterval(this.timer);
  },
};
</script>

<style scoped lang="less">
.login {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-form {
    .logo {
      width: 100%;
      height: 60px;
      text-align: center;
      img {
        width: 100%;
        height: 100%;
      }
    }
    width: 400px;
    height: 350px;
    padding: 30px;
    border: 1px solid #dfdfdf;
    border-radius: 10px;
    background-color: rgb(255, 255, 255);
    .login-form-button {
      width: 100%;
    }
    .captchaBtn {
      color: rgb(44, 125, 255);
    }
    .captchaItem {
      .captchaCode {
        width: 238px;
        border-radius: 0px;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        border-right: 0px;
      }
      .captchaImage {
        width: 100px; // 根据需要调整图片宽度
        height: 32px; // 根据需要调整图片高度
        margin-bottom: 2.5px;
        cursor: pointer;
      }
    }
  }
}
</style>

